import { Button, Form, Input, Table, Popconfirm, Modal, InputNumber, Select, DatePicker, message } from 'antd';
import { useEffect, useState } from 'react';
import { getTableData, addUser, deleteUser } from '../../api/home/index'
import { getCustomerList, addOrEditCustomer } from '../../api/customer';
import dayjs from 'dayjs';
import './user.css'
export default function User() {
    // 定义用户昵称
    const [listData, setListData] = useState([])
    // 定义列表内容
    const [tableData, setTableData] = useState([])
    // 定义弹窗显示的标题， 因为有不同的状态，所以也要定义 useState
    const [modalTitle, setModalTitle] = useState('')
    // 创建一个控制弹框的打开关闭状态变量
    const [isModalOpen, setIsModalOpen] = useState(false)
    // 创建一个 form 实例
    const [form] = Form.useForm()
    // 新增/编辑
    function handleClick(type, rowData, e) {
        setModalTitle(type)
        setIsModalOpen(!isModalOpen)
        if (type === 'edit') {
            // 回填编辑的数据
            // 第一步： 对数据进行深拷贝
            const cloneData = JSON.parse(JSON.stringify(rowData))
            // 2.处理数据中的日期
            cloneData.date = dayjs(cloneData.date)
            // 3.回传
            console.log(cloneData, 'cloneData');
            form.setFieldsValue(cloneData)
        }
    }
    // 弹窗取消
    function handleCancel() {
        setIsModalOpen(!isModalOpen)
        form.resetFields()
    }
    // 弹窗ok
    function handleOk() {
        // console.log('ok');
        // 做表单校验的逻辑，利用表单中提供的 Api 
        form.validateFields().then((val) => {
            console.log(val, '第一个val');
            // val 就是表单中填的内容，是根据 绑定的 form 实例实现的

            // 引入dayjs, 对日期的格式进行处理
            val.date = dayjs(val.date).format('YYYY-MM-DD')
            // console.log(val, 'newval');
            // 参数有了，接下来就是调后端接口，根据传入的 弹框type 进行判断
            if (modalTitle === 'add') {
                // 新增
                console.log('新增');
                addOrEditCustomer(val).then((res) => {
                    console.log(res);
                })
            } else {
                // 编辑
                console.log('编辑');
                // 此处拿不到 数据行的 id， 需要在表单列表手动设置一个Form.item，但不显示在页面里
                addOrEditCustomer(val).then((res) => {
                    console.log(res);
                })
            }
        }).then(() => {
            // 重新渲染列表
            getUser()
            // 重置表单
            form.resetFields()
        }).catch((err) => {
            console.log(err);
        })
        setIsModalOpen(!isModalOpen)
    }
    // 搜索
    function handleFinish(e) {
        // 点击提交按钮，将input输入框中的用户姓名作为搜索条件传给接口
        setListData({
            name: e.keyword
        })
        // 此处需要点击两次查询才能拿到结果，说明 setState 的操作是一个异步操作，下一次更新dom时才会显示上一次的结果
        // 所以在这个方法内，通过 useEffect 监听一下，当数据变化时，重新渲染列表
        // useEffect(() => {
        //     getUser()
        // }, [listData])
        // 这样写报错，useEffect 只能写在组件的内部
        // getUser()
        // console.log(e);
    }
    // 写在组件内，方法外
    useEffect(() => {
        getUser()
    }, [listData])
    // 删除
    function handleDelete(rowData) {
        // console.log(rowData, 'rowData');
        let row = {
            id: rowData.id
        }
        deleteUser(row).then((res) => {
            console.log(res);
            message.success('删除成功')
        }).then(() => {
            getUser()
        })
    }
    // 获取用户信息的方法
    function getUser() {
        // 调用后端接口获取用户列表数据
        getCustomerList(listData).then((res) => {
            console.log(res, '用户信息');
            // 给响应式 列表数据替换数据
            setTableData(res.data)
        })
    }
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name'
        },
        // {
        //     title: '年龄',
        //     dataIndex: 'age'
        // },
        {
            title: '性别',
            dataIndex: 'sex',
            /* 此处sex返回的是 0/1， 所以需要做一个映射 */
            // render函数， 接收一个参数，就是后端返回的内容
            render: (val) => {
                return val ? '女' : '男'
            }
        },
        {
            title: '联系方式',
            dataIndex: 'phone'
        },
        {
            title: '操作',
            render: (rowData) => {
                return (
                    <div className='flex=box'>
                        <Button type='primary' style={{ marginRight: '5px' }} onClick={handleClick.bind('', 'edit', rowData)}>编辑</Button>
                        {/* 使用 .bind 传值， 第一个值默认传一个事件对象 */}
                        <Popconfirm
                            title='提示'
                            description='你确定要删除吗？'
                            okText='确定'
                            cancelText='取消'
                            onConfirm={handleDelete.bind('', rowData)}
                        >
                            <Button type='primary' danger>删除</Button>
                            {/* 事件的确认会确认到 外层的 pop气泡弹窗上 */}
                        </Popconfirm>
                    </div>
                )
            }
        }

    ]
    // DOM 第一次渲染完成后调用
    useEffect(() => {
        getUser()
    }, [])


    return (
        <div className='user'>
            <div className='flex-box'>
                <Button type='primary' onClick={handleClick.bind('', 'add')}>新增</Button>
                {/* 表单Form是怎么和Form.Item表单域 产生联系的？---给输入框绑定一个name */}
                {/* 绑定了name 的输入框 ，name 会和输入框中的值 以 键值对的形式放在 对象中 */}
                <Form layout='inline' onFinish={handleFinish}>
                    <Form.Item name='keyword'>
                        <Input placeholder='请输入用户名'></Input>
                    </Form.Item>
                    {/* <Form.Item name='password'>
                        <Input placeholder='请输入mima'></Input>
                    </Form.Item> */}
                    <Form.Item>
                        <Button type='primary' htmlType='submit'>搜索</Button>
                    </Form.Item>
                </Form>
            </div>
            <Table columns={columns} dataSource={tableData} rowKey={'id'} style={{
                marginTop: '20px'
            }}></Table>
            <Modal
                title={modalTitle === 'add' ? '新增用户' : '编辑信息'}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                okText='确定'
                cancelText='取消'
            >
                <Form
                    /* 设置表单的布局，使用 grid 栅格布局 */
                    labelCol={{
                        span: 6
                    }}
                    wrapperCol={{
                        span: 18
                    }}
                    // 对齐方式
                    labelAlign='left'
                    // 书写表单清空，需要拿到 form 的实例, 要使用 antd 提供的一个钩子函数->form.useForm()
                    form={form}
                >
                    <Form.Item>
                        <Form.Item name='id' noStyle>
                            <Input type='hidden'></Input>
                            {/* 只需要给 Input 输入框带一个 hidden的属性，就可以让输入框不可见 */}
                        </Form.Item>
                    </Form.Item>
                    <Form.Item label='姓名' name='name' rules={[
                        { required: true, message: '请输入姓名' }
                    ]}>
                        <Input placeholder='请输入姓名'></Input>
                    </Form.Item>
                    {/* <Form.Item label='年龄' name='age' rules={[
                        { required: true, message: '请输入年龄' },
                        { type: 'number', message: '年龄必须为数字' }
                        // 定义 校验规则， type必须为 number 类型
                    ]}>
                        <InputNumber placeholder='请输入年龄'></InputNumber> */}
                        {/* antd  提供了number类型的输入框， 只能输入数字 */}
                    {/* </Form.Item> */}
                    <Form.Item label='性别' name='sex' rules={[
                        { required: true, message: '请输入性别' }
                    ]}>
                        {/* 使用下拉选择器 */}
                        <Select
                            options={[
                                { value: 0, label: '男' },
                                { value: 1, label: '女' }
                            ]}
                            placeholder='请选择性别'
                        >
                            {/* 子项通过 options 定义子项 */}
                        </Select>
                    </Form.Item>
                    {/* <Form.Item label='出生日期' name='date' rules={[
                        { required: true, message: '请选择日期' }
                    ]}>
                        <DatePicker format='YYYY/MM/DD' placeholder='请选择日期' />
                    </Form.Item> */}
                    <Form.Item label='电话' name='phone' rules={[
                        { required: true, message: '请输入联系方式' }
                    ]}>
                        <Input placeholder='请输入电话'></Input>
                    </Form.Item>
                </Form>
            </Modal>
        </div >
    )
}